<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="单位，联系人，电话等"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="栏目：" prop="columnId">
          <treeselect
            class="treeSelect"
            :options="accountData"
            :clearable="false"
            v-model="query.columnId"
            :normalizer="normalizer"
            placeholder="请选择栏目"
          />
        </el-form-item>
        <el-form-item label="发布者：" prop="publisherId">
          <el-select
            v-model="query.publisherId"
            filterable
            remote
            placeholder="请输入发布者"
            :remote-method="remotepublisher"
            clearable
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              @click="addContet"
              v-no-more-click
              >添加内容</el-button
            >
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              @click="addHouse"
              v-no-more-click
              >添加房源</el-button
            >
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              @click="editConCol"
              v-no-more-click
              >编辑栏目</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="title"
        label="标题"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="columnName"
        label="栏目"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="publisherName"
        label="发布人"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="hotStatus"
        label="热门"
        align="center"
        :formatter="translaHot"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="deleteStatus"
        label="状态"
        align="center"
        :formatter="translaDete"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editorContent(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deleteData(scope.$index, scope.row)"
            v-if="scope.row.deleteStatus == 0"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
          <el-popconfirm
            title="确定启用数据吗？"
            @onConfirm="enaConCol(scope.$index, scope.row)"
            v-else
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #409eff"
              v-no-more-click
              >启用</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 新增修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="800px"
      class="dialogBox"
      :close-on-click-modal="false"
      @close="closeDia"
    >
      <AddContent
        :contentId="contentId"
        :dialogVisible="dialogVisible"
        v-on:dialogCol="closeDialogCol($event)"
        :getList="getList"
        v-if="showArticle"
      ></AddContent>
      <AddHouse
        v-if="showHouse"
        :contentId="contentId"
        :dialogVisible="dialogVisible"
        v-on:dialogCol="closeDialogCol($event)"
        :getList="getList"
      ></AddHouse>
    </el-dialog>
    <el-dialog
      title="编辑栏目"
      :close-on-click-modal="false"
      :visible.sync="editVisible"
      v-if="editVisible"
    >
      <!-- <Editor></Editor> -->
      <EditColumn v-on:dialogCol="closeDialogCol($event)"></EditColumn>
    </el-dialog>
  </div>
</template>

<script>
import EditColumn from "@/components/content/EditColumn";
import AddContent from "@/components/content/AddContent"; //添加内容页面组件!
import AddHouse from "@/components/content/AddHouse"; //编辑修改页面和添加房源页面组件!
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getContentList,
  getAstatus,
  delConCol,
  getColumnList,
  getConByName,
  enaConCol,
} from "../../../src/assets/js/api";
export default {
  name: "ContentList",
  components: { AddContent, EditColumn, Treeselect, AddHouse },
  data() {
    return {
      dialogVisible: false,
      showHouse: false,
      showArticle: false,
      editVisible: false,
      title: "",
      total: 10,
      pages: 0,
      contentId: false,
      loading: false,
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: null,
        columnId: null,
        publisherId: null,
      },
      options: [],
      columnId: [{ itemValue: null, itemText: "不限" }],
      accountData: [],
      tableData: [],
      whetherData: [],
      whetherState: [],
      deleteStatus: [],
      golbalPermissions: null,
      currentPage: 1,
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        };
      },
    };
  },
  created() {
    this.getList();
    this.getAstatus();
    this.getColumnList();
  },
  methods: {
    //关闭弹窗
    closeDia() {
      this.showArticle = false;
      this.showHouse = false;
    },
    // 获取表格数据
    getList() {
      this.showHouse = false;
      this.showArticle = false;
      getContentList(this.query).then((res) => {
        this.currentPage = res.data.current;
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    // 查询字典产品状态
    getAstatus() {
      //获取栏目状态
      // getAstatus("products_state").then(res => {
      //   let arr = res.data;
      //   let arr2 = arr.map(function(arr) {
      //     arr.id = parseInt(arr.itemValue);
      //     return arr;
      //   });
      //   this.accountData = this.columnId.concat(arr2);
      // });
      //获取是否
      getAstatus("whether_state").then((res) => {
        this.whetherState = res.data;
      });
      //获取删除状态
      getAstatus("col_dete").then((res) => {
        this.deleteStatus = this.columnId.concat(res.data);
      });
    },
    //获取栏目
    getColumnList() {
      getColumnList().then((res) => {
        this.accountData = res.data;
      });
    },
    //状态翻译
    // 热门状态翻译
    translaHot(row) {
      return this.selectDictLabel(this.whetherState, row.hotStatus);
    },
    //删除状态翻译
    translaDete(row) {
      return this.selectDictLabel(this.deleteStatus, row.deleteStatus);
    },
    //远程获取发布者
    remotepublisher(query) {
      if (query !== "") {
        this.loading = true;
        getConByName({ name: query }).then((res) => {
          //this.restaurants = res.data;
          setTimeout(() => {
            this.loading = false;
            this.options = res.data;
          }, 200);
        });
      } else {
        this.options = [];
      }
    },
    // 搜索功能
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    // 清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.pageNo = 1;
      this.query.keyWord = "";
      this.query.columnId = "";
      this.query.publisherId = "";
      this.getList();
      // this.query.keyWord = null;
      // this.query.pageSize = 10;
      // this.query.productStatus = null;
    },
    // 编辑按钮操作
    editorContent(obj) {
      let that = this;

      if (obj.isHouse) {
        that.showHouse = true;
        that.title = "修改房源内容";
        this.contentId = obj.id;
      } else {
        that.showArticle = true;
        that.title = "修改栏目内容";
        this.contentId = obj.id;
      }
      //  that.showHouse = true;
      //     that.title = "修改房源内容";
      //   this.contentId = obj.id;

      this.dialogVisible = true;
    },
    // 添加按钮操作
    addContet() {
      this.dialogVisible = true;
      this.showArticle = true;
      this.contentId = false;
      this.query.currentPage = 1;
      this.query.pageNo = 1;
      this.title = "添加栏目内容";
    },
    addHouse() {
      this.dialogVisible = true;
      this.showHouse = true;
      this.contentId = false;
      this.query.currentPage = 1;
      this.query.pageNo = 1;
      this.title = "添加房源";
    },
    //编辑栏目
    editConCol() {
      this.editVisible = true;
    },
    // 删除操作
    deleteData(index, obj) {
      delConCol(obj.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getList(this.query);
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
          this.getList(this.query);
        }
      });
    },
    //启用操作
    enaConCol(index, obj) {
      enaConCol(obj.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getList();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
          this.getList();
        }
      });
    },
    closeDialogCol(msg) {
      this.editVisible = msg;
      this.dialogVisible = msg;
      this.showArticle = msg;
      this.showHouse = msg;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
  },
  //监听删除数据如果是这一页的最后一条数据，返回上一页
  watch: {
    total: function () {
      if (
        this.total == (this.query.pageNo - 1) * this.query.pageSize &&
        this.totalotal != 0
      ) {
        this.query.pageNo -= 1;
        this.getList(); //获取列表数据
      }
    },
  },
};
</script>

<style scoped type="less">
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
.query ::v-deep .el-input__inner
{
    height: 32px;
}
.query ::v-deep .el-input__icon
{
    line-height: 32px;
}
.query ::v-deep .el-form-item
{
    width: 320px;
}
.query ::v-deep .el-form-item__content
{
    width: 210px;
}
.query ::v-deep .vue-treeselect__control
{
    line-height: 30px;  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder
{
    line-height: 30px;
}
.el-col-24 ::v-deep .el-form-item,
.el-col-24 ::v-deep .el-form-item__content
{
    width: 100%;
}
::v-deep .btn .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.box
{
    position: relative;  padding: 20px 20px 50px 20px;  background: #fff;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}

</style>
